<template>
  <div>
    <div class="content card-body">
      <div class="articleInfo mb-sm">
        <h2 class="title">{{ article.title }}</h2>
        <div class="tag-list">
          <span class="tag" v-for="(index, tag) in article.tags" :key="index">{{
            tag
          }}</span>
        </div>
        <blockquote>
          <!--<img class="profile" src="../assets/default.jpg" alt="">-->
          <span class="info-item"
            >作者：<span class="author">{{ article.author }}</span></span
          >
          <span class="info-item"
            >发表时间：<span class="pb-time">{{
              format(article.createTime)
            }}</span></span
          >
          <span class="info-item">
            <i class="el-icon-view" style="vertical-align: middle"></i>
            {{ article.views ? article.views : "" }}
          </span>
        </blockquote>
        <!-- 其他认证信息 -->
      </div>
      <mavon-editor
        :value="article.content"
        :editable="false"
        :ishljs="true"
        :defaultOpen="'preview'"
        :toolbarsFlag="false"
        :subfield="false"
        :scrollStyle="true"
        style="box-shadow: none; z-index: 1"
      ></mavon-editor>
      <div class="article-bottom">
        <button class="func-btn" @click="handleLike">
          <i
            class="layui-icon layui-icon-praise"
            style="line-height: 1; vertical-align: middle"
          ></i>
          <span class="text">{{ article.liked ? "已点赞" : "点赞" }}</span>
        </button>
        <button class="func-btn" @click="handleCollect">
          <i class="el-icon-collection-tag"></i>
          <span class="text">{{ collected ? "已收藏" : "收藏" }}</span>
        </button>
        <button
          class="func-btn"
          v-clipboard:copy="alink"
          v-clipboard:success="cpSuccess"
          v-clipboard:error="cpError"
        >
          <i class="el-icon-share"></i>
          <span class="text">转发</span>
        </button>
      </div>
    </div>
    <!-- 评论组件 -->
    <comment :cmt="cmtProp"></comment>
  </div>
</template>

<script>
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
import Comment from "@/components/Comment";
import request from "@/utils/request";
import { Message } from "element-ui";
import { parseTime } from "@/utils";

export default {
  name: "Content",
  components: {
    mavonEditor,
    Comment,
  },
  props: ["articleId"],
  data() {
    return {
      // 文章链接
      alink: "",
      // 文章
      article: {
        // 标签
        tags: [],
        // 浏览量
        views: 0,
        // 点赞量
        hits: 0,
        // 收藏量
        collections: 0,
        // 标题
        title: "",
        // 作者
        author: "",
        // 内容
        content: "",
        // 发布时间
        createTime: null,
        // 修改时间
        updateTime: null,
      },
      // 是否已点赞
      liked: false,
      // 是否已收藏
      collected: false,
      // 是否已转发
      // forwarded: false,
    };
  },
  methods: {
    /**
     * 获取文章
     */
    getArticle() {
      request.get(`/articles/${this.articleId}`).then((res) => {
        // console.log(res.data);
        this.article = res.data.article;
        // 生成文章链接
        this.alink = this.article.title + window.location.href;
      });
    },
    /**
     * 点赞
     */
    handleLike() {
      this.article.liked = !this.article.liked;
    },
    /**
     * 收藏
     */
    handleCollect() {
      this.collected = !this.collected;
      if (this.collected) {
        Message({
          type: "info",
          message: "收藏成功",
          duration: 1500,
          center: true,
        });
      } else {
        Message({
          type: "info",
          message: "已取消收藏",
          duration: 1500,
          center: true,
        });
      }
    },
    /**
     * 复制到剪贴板成功的回调函数
     */
    cpSuccess(e) {
      Message({
        type: "info",
        message: "文章链接已复制，快分享给更多小伙伴吧~",
        duration: 1500,
        center: true,
      });
    },
    /**
     * 复制到剪贴板失败的回调函数
     */
    cpError(e) {
      Message({
        type: "error",
        message: "无法复制文章链接",
        duration: 1500,
        center: true,
      });
    },
    format(time) {
      return parseTime(time);
    }
  },
  computed: {
    cmtProp() {
      return {
        type: "article",
        id: this.articleId
      }
    }
  },
  created() {
    this.getArticle();
    // console.log(this.articleId);
  },
};
</script>

<style scoped>
.content {
  background-color: #fff;
}

.articleInfo blockquote {
  padding: 5px;
  /* border-left: 4px solid #5fb878; */
  background-color: #deead5;
  border-radius: 2px;
  color: #9e9e9e;
  text-align: center;
}
.articleInfo .info-item + .info-item {
  margin-left: 10px;
}
.articleInfo .info-item span {
  color: #074b60;
}
.articleInfo .title {
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
}

.tag-list {
  margin-bottom: 5px;
  text-align: center;
}
.tag-list .tag {
  background-color: #deead5;
  color: #5fb878;
  padding: 0 4px;
  border-radius: 4px;
  opacity: 0.8;
  cursor: pointer;
}
.tag-list .tag:hover {
  opacity: 1;
}
.tag-list .tag + .tag {
  margin-left: 10px;
}

.article-bottom {
  margin: 30px 0 15px;
  text-align: center;
}

/**
 * 滑块动画
 */
.article-bottom .func-btn {
  position: relative;
  z-index: 0;
  background-color: transparent;
  border: 1px solid #5fb878;
  border-radius: 2px;
  padding: 4px 12px;
  color: #5fb878;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s;
}
.article-bottom .func-btn.active {
  color: #fff;
  background-color: #5fb878;
}
.article-bottom .func-btn.hover::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #5fb878;
  transform: translateX(-100%);
  transition: all 0.3s;
}
.article-bottom .func-btn.hover:hover:before {
  transform: translateX(0);
}
.article-bottom .func-btn.hover:hover {
  color: #ffffff;
}
.article-bottom .func-btn + .func-btn {
  margin-left: 10px;
}
.article-bottom .func-btn .text {
  margin-left: 5px;
}
</style>